<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>都市生活</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#travel ul#event{
				display: flex;
				width: 700px;
				border: 2px double gold;
				overflow: hidden;
				
			}
			#travel ul#event li{
				margin: 4px;
				
			}
			#travel ul#event li #d1{
				border: 2px solid darkgray;
				border-radius: 5px;
				padding: 4px;
				box-sizing: border-box;
				font-size: 16px;
				font-family: "宋体";
				font-weight: 500;
			}
			#travel ul#event li div.adv{
				position: relative;
				
			}
			#travel ul#event li div.adv p{
				position: absolute;
				text-align: center;
				right: 0;
				bottom: 3px;
				height: 25px;
				line-height: 25px;
				background-color: black;
				width: 100%;
				opacity: 0.5;
				color: white;
				font-size: 16px;
				z-index: 999;
				
			}
		</style>
	</head>
	<body>
		<div id="travel">
			<ul id="event">
				<li>
					<div>
						<span>都市生活</span>
						
						<a href="#">更多</a>
					</div>
					<div id="d1">
						<div class="adv">
							<img src="maple.jpg" alt="">
							<p>叫你如何画好职业妆</p>
						</div>
						<p>时间:11月9日，11:00</p>
						<p>地点:海淀区娇兰佳人工作室</p>
					</div>
				</li>
				<li>
					<div>
						<span>都市生活</span>
						
						<a href="#">更多</a>
					</div>
					
					<div id="d1">
						<div class="adv">
							<img src="maple.jpg" alt="">
							<p>静秋魅力.共赏香山红叶</p>
						</div>
						<p>时间:11月6日，8:00</p>
						<p>朝阳区珠江帝景东大门集合</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>
